<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ - 题目列表</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fefefe;
            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
       .navbar {
            background-color: #1e293b;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1.25rem 0;
        }

       .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            max-width: 1280px;
            margin: 0 auto;
        }

       .navbar a {
            color: #cbd5e1;
            font-size: 1.125rem;
            font-weight: 500;
            margin-right: 1.5rem;
            transition: color 0.3s ease;
            text-decoration: none;
        }

       .navbar a:hover {
            color: #3b82f6;
        }

        /* 标题样式 */
       .page-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            margin-top: 4rem;
            margin-bottom: 2.5rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式 */
       .question-table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            background-color: #fff;
            border-radius: 0.75rem;
            overflow: hidden;
        }

       .question-table th,
       .question-table td {
            padding: 1.25rem;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

       .question-table th {
            background-color: #f1f5f9;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

       .question-table tr:last-child td {
            border-bottom: none;
        }

       .question-table tr {
            transition: background-color 0.3s ease;
        }

       .question-table tr:hover {
            background-color: #f8fafc;
        }

        /* 难度颜色样式 */
       .level-simple {
            color: #22c55e;
            font-weight: 600;
        }

       .level-medium {
            color: #f59e0b;
            font-weight: 600;
        }

       .level-hard {
            color: #ef4444;
            font-weight: 600;
        }

        /* 页脚样式 */
       .footer {
            background-color: #1e293b;
            color: #cbd5e1;
            text-align: center;
            padding: 1.5rem 0;
            margin-top: 4rem;
        }

        /* 点击特效画布样式 */
        canvas {
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
        }

        /* 鼠标指针样式 */
       .pointer {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 99999;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="nav-links">
                <a href="/"><i class="fa-solid fa-house"></i> 首页</a>
                <a href="/all_questions"><i class="fa-solid fa-list"></i> 题库</a>
                <a href="#"><i class="fa-solid fa-trophy"></i> 竞赛</a>
                <a href="#"><i class="fa-solid fa-comments"></i> 讨论</a>
                <a href="#"><i class="fa-solid fa-briefcase"></i> 求职</a>
            </div>
            <a href="#" class="login-link"><i class="fa-solid fa-right-to-bracket"></i> 登录</a>
        </div>
    </nav>

    <!-- 题目列表部分 -->
    <div class="container mx-auto px-4 py-8">
        <h1 class="page-title">题目列表</h1>
        <div class="bg-white rounded-lg overflow-hidden shadow-md">
            <table class="question-table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>标题</th>
                        <th>难度</th>
                    </tr>
                </thead>
                <tbody>
                    {{#question_list}}
                    <tr>
                        <td>{{number}}</td>
                        <td>
                            <a href="/question/{{number}}" class="text-blue-600 hover:text-blue-800 transition duration-300">
                                {{title}}
                            </a>
                        </td>
                        <td>
                            <span class="{{#level_simple}}level-simple{{/level_simple}} {{#level_medium}}level-medium{{/level_medium}} {{#level_hard}}level-hard{{/level_hard}}">
                                {{level}}
                            </span>
                        </td>
                    </tr>
                    {{/question_list}}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2025 @liuhaodong. All rights reserved.</p>
    </footer>

    <!-- 点击特效 -->
    <script>
        function clickEffect() {
            let balls = [];
            let longPressed = false;
            let longPress;
            let multiplier = 0;
            let width, height;
            let origin;
            let normal;
            let ctx;
            const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
            const canvas = document.createElement("canvas");
            document.body.appendChild(canvas);
            canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
            const pointer = document.createElement("span");
            pointer.classList.add("pointer");
            document.body.appendChild(pointer);

            if (canvas.getContext && window.addEventListener) {
                ctx = canvas.getContext("2d");
                updateSize();
                window.addEventListener('resize', updateSize, false);
                loop();
                window.addEventListener("mousedown", function (e) {
                    pushBalls(randBetween(10, 20), e.clientX, e.clientY);
                    document.body.classList.add("is-pressed");
                    longPress = setTimeout(function () {
                        document.body.classList.add("is-longpress");
                        longPressed = true;
                    }, 500);
                }, false);
                window.addEventListener("mouseup", function (e) {
                    clearInterval(longPress);
                    if (longPressed == true) {
                        document.body.classList.remove("is-longpress");
                        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                        longPressed = false;
                    }
                    document.body.classList.remove("is-pressed");
                }, false);
                window.addEventListener("mousemove", function (e) {
                    let x = e.clientX;
                    let y = e.clientY;
                    pointer.style.top = y + "px";
                    pointer.style.left = x + "px";
                }, false);
            } else {
                console.log("canvas or addEventListener is unsupported!");
            }

            function updateSize() {
                canvas.width = window.innerWidth * 2;
                canvas.height = window.innerHeight * 2;
                canvas.style.width = window.innerWidth + 'px';
                canvas.style.height = window.innerHeight + 'px';
                ctx.scale(2, 2);
                width = (canvas.width = window.innerWidth);
                height = (canvas.height = window.innerHeight);
                origin = {
                    x: width / 2,
                    y: height / 2
                };
                normal = {
                    x: width / 2,
                    y: height / 2
                };
            }

            class Ball {
                constructor(x = origin.x, y = origin.y) {
                    this.x = x;
                    this.y = y;
                    this.angle = Math.PI * 2 * Math.random();
                    if (longPressed == true) {
                        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
                    } else {
                        this.multiplier = randBetween(6, 12);
                    }
                    this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
                    this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
                    this.r = randBetween(8, 12) + 3 * Math.random();
                    this.color = colours[Math.floor(Math.random() * colours.length)];
                }

                update() {
                    this.x += this.vx - normal.x;
                    this.y += this.vy - normal.y;
                    normal.x = -2 / window.innerWidth * Math.sin(this.angle);
                    normal.y = -2 / window.innerHeight * Math.cos(this.angle);
                    this.r -= 0.3;
                    this.vx *= 0.9;
                    this.vy *= 0.9;
                }
            }

            function pushBalls(count = 1, x = origin.x, y = origin.y) {
                for (let i = 0; i < count; i++) {
                    balls.push(new Ball(x, y));
                }
            }

            function randBetween(min, max) {
                return Math.floor(Math.random() * max) + min;
            }

            function loop() {
                ctx.fillStyle = "rgba(255, 255, 255, 0)";
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (let i = 0; i < balls.length; i++) {
                    let b = balls[i];
                    if (b.r < 0) continue;
                    ctx.fillStyle = b.color;
                    ctx.beginPath();
                    ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
                    ctx.fill();
                    b.update();
                }
                if (longPressed == true) {
                    multiplier += 0.2;
                } else if (!longPressed && multiplier >= 0) {
                    multiplier -= 0.4;
                }
                removeBall();
                requestAnimationFrame(loop);
            }

            function removeBall() {
                for (let i = 0; i < balls.length; i++) {
                    let b = balls[i];
                    if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                        balls.splice(i, 1);
                    }
                }
            }
        }
        clickEffect(); // 调用特效函数

        // 检测设备类型
        function detectDevice() {
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            if (isMobile) {
                document.body.classList.add('mobile');
            } else {
                document.body.classList.add('desktop');
            }
        }
        detectDevice();
    </script>
</body>

</html>    